<template>
  <div id="app">
    <router-view />
    <div id="nav">
      <router-link to="/movie/hot">
        <div><span class="iconfont icon-dianying"></span></div>
        <div>电影/影院</div>
      </router-link>
      <router-link to="/video">
        <div><span class="iconfont icon-zhibo"></span></div>
        <div>视频</div>
      </router-link>
      <router-link to="/shortvideo">
        <div><span class="iconfont icon-yingyuan"></span></div>
        <div>小视频</div>
      </router-link>
      <router-link to="/show">
        <div><span class="iconfont icon-yanchu"></span></div>
        <div>演出</div>
      </router-link>
      <router-link to="/login">
        <div><span class="iconfont icon-wode"></span></div>
        <div>我的</div>
      </router-link>
    </div>
    <div class="gotop" v-show="showType" @click="gotopFun">
      <div class="dd_">
        <img src="./assets/3.png" alt="">
      </div>
      <div class="dd_one"> 打开App</div>
     </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      showType: false,
    };
  },
  mounted() {
    //挂载 scroll事件
    window.addEventListener("scroll", this.scrollFun, true);
  },
  methods: {
    scrollFun() {
      console.log("滚动事件触发了");
      //获取滚动高度
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop);
      if (scrollTop > 200) {
        this.showType = true;
      } else {
        this.showType = false;
      }
    },
    gotopFun() {
      //点击滚动到顶部  ，setInterval
      document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
  },
};
</script>
<style>
/*reset 清除浏览器的默认样式*/
* {
  padding: 0;
  margin: 0;
}
ul,
li {
  list-style: none;
}
div {
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
.gotop {
  position: fixed;
  right: 0;
  bottom: 120px;
  width: 110px;
  height: 38px;
  line-height: 38px;
  z-index: 10;
  opacity: 0.94;
  background-image: -webkit-linear-gradient(316deg, #fb3333, #ff5269 75%);
  background-image: linear-gradient(134deg, #fb3333, #ff5269 75%);
  box-shadow: 0 2px 4px 0 rgb(160 44 41 / 15%);
  border-radius: 20px 0 0 20px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  /* justify-content:center; */
  -webkit-box-align: center;
  align-items: center;
  text-align: center;
}
.dd_ {

  width: 46px;
  /* background: url(./assets/3.png) no-repeat;
  background-size: 100%;
  background-position: 50% 50%;
  text-align: center; */
  padding-right: 0px;
}
.dd_ img{
  width: 50px;
  padding-left: 20px;
  text-align: center;
  margin-bottom: -6px;
}
.dd_one{
    color: #fff;
    margin-left: 5px;
    font-size: 14px;
}

/*reset*/
#nav {
  z-index: 999;
  width: 100%;
  height: 50px;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #ccc;
  display: flex;
  position: fixed;
  justify-content: space-around;
}
#nav a div {
  height: 25px;
  line-height: 27px;
  text-align: center;
}
#nav a div span {
  font-size: 24px;
}
#nav a {
  font-size: 12px;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #f03d37;
}
::-webkit-scrollbar {
  display: none;
}
</style>
